<template>
  <div ref="jsHacker" class="jsHacker">
    <canvas id="c"></canvas>
  </div>
</template>

<script>
  export default {
    name: "",
    components: {},
    data() {
      return {
        //页面宽度
        width: "",
        //页面高度
        height: ""
      }
    },
    methods: {
      jsHacker: function () {
        //获得 div
        let c = document.getElementById("c");
        let ctx = c.getContext("2d");
        //显示字符
        let chinese = "a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9";
        chinese = chinese.split("");
        //字体大小
        let font_size = 12;

        //设置canvas 的宽高
        c.height = this.height - 70;
        c.width = this.width;

        //计算列数
        let columns = c.width / font_size;

        let drops = [];
        for (let i = 0; i < columns; i++) {
          drops[i] = 1;
        }

        window.onresize = function () {
          c.height = this.height - 70;
          c.width = this.width;
          columns = c.width / font_size;
          drops = [];
          for (let i = 0; i < columns; i++) {
            drops[i] = 1;
          }
        }

        function draw() {
          ctx.fillStyle = "rgba(0,0,0,0.05)";
          ctx.fillRect(0, 0, c.width, c.height);
          ctx.fillStyle = "#0F0";
          ctx.font = font_size + "px arial";

          for (let i = 0; i < drops.length; i++) {
            let text = chinese[Math.floor(Math.random() * chinese.length)]
            ctx.fillText(text, i * font_size, drops[i] * font_size);
            if (drops[i] * font_size > c.height && Math.random() > 0.975) {
              drops[i] = 0;
            }
            drops[i]++;
          }
        }

        //定时器
        setInterval(draw, 50);
      },
      load: function () {
        this.width = document.body.clientWidth || document.documentElement.clientWidth;
        this.height = document.body.clientHeight || document.documentElement.clientHeight;
        this.$refs.jsHacker.style.width = `${this.width}px`;
        this.$refs.jsHacker.style.height = `${this.height - 70}px`;
      }
    },
    mounted() {
      this.load();
      this.jsHacker();
    }
  }
</script>

<style scoped>
  .jsHacker {
    width: 100%;
  }
</style>
